<template>
  <div class="homeOrder">
      <!-- 订单列表 -->
      <div class="order-list">
     <template v-for="(item,index) in orderItems">
        <div class="list clearfix" :key="index">
          <div class="list-tit">
            <span class="tit">订单日期：{{formatDateDT(new Date(item.createTime),'yyyy-MM-dd')}}</span>
            <span class="status">{{item.status}}</span>
          </div>
          <div class="pImg fl">
           <img  src="../../assets/imgs/pdetail1.png" alt="">
          </div>
          <div class="pInfo fl">
           <p class="grey">产品名称： <span>{{item.productName}}</a></span></p>
           <p class="grey">产品数量： <span>{{item.productNum}}</span></p>
           <p class="grey">订单金额： <span>{{item.orderAmt}}</span> </p>
         </div>
         <el-button v-if="item.devStatus ==='已发货'" class="btn" type="danger" size="small" @click="confirm(index)">确认收货</el-button>

         <span class="devstatus">{{item.devStatus}}</span>
        </div>
        <el-collapse accordion @change="change(item.orderSsn)">
        <el-collapse-item title="查看支付信息">
           <pay-info :productList="payInfos"></pay-info>
        </el-collapse-item>
        </el-collapse>
        </template>
      </div>
  </div>
</template>

<script>
import payInfo from './homePay.vue'
export default {
  beforeMount () {
    this.getTable()
  },
  components: {
    payInfo: payInfo
  },
  data () {
    return {
      payInfos: [],
      orderItems: [],
      filters: {
        pageSize: 100,
        pageNow: 1,
        token: this.$store.state.token
      }
    }
  },
  methods: {
    confirm (i) {
      let ssn = this.orderItems[i].orderSsn
      // 确认收货
      this.$http.post('http://218.104.153.143:8089/numberone-auth/busiOrderDtl/receiptConfirm.shtml', {orderSsn: ssn, token: this.$store.state.token}, { // 头文件及JSON格式设定
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        emulateJSON: true
      }).then((data) => { // 数据获取成功
        this.$store.dispatch('setUser', data.body.userInfo)
        this.$message({
          message: '确认收货成功',
          type: 'success',
          duration: 1000,
          showClose: false
        })
        this.getTable()
      }, (ne) => { // 数据获取失败
        this.$message({
          message: '网络异常',
          type: 'error',
          duration: 1000,
          showClose: false
        })
      })
    },
    change (id) {
     // 获取我支付单信息
      let params = {}
      params.orderSsn = id
      params.token = this.$store.state.token
      this.$http.post('http://218.104.153.143:8089/numberone-auth/busiOrderDtl/paySsnInfo.shtml', params, { // 头文件及JSON格式设定
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        emulateJSON: true
      }).then((data) => { // 数据获取成功
        this.payInfos = data.body.productList
      }, (ne) => { // 数据获取失败
        this.$message({
          message: '网络异常',
          type: 'error',
          duration: 1000,
          showClose: false
        })
      })
    },
    formatDateDT (date, fmt) {
      var o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        'S': date.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      for (var k in o) { if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
      return fmt
    },
    getTable () {
      let that = this
    // 获取我的订单
      this.$http.post('http://218.104.153.143:8089/numberone-auth/busiOrderDtl/orderList.shtml', this.filters, { // 头文件及JSON格式设定
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        emulateJSON: true
      }).then((data) => { // 数据获取成功
        that.orderItems = data.body.orderList.records
      }, (ne) => { // 数据获取失败
        this.$message({
          message: '数据获取失败',
          type: 'error',
          duration: 1000,
          showClose: false
        })
      })
    }
  }
}
</script>

<style lang="scss" type="stylesheet/scss">
.homeOrder{
    font-size: 12px;
  .order-list{
    background-color: #F6F6F6;
    margin-bottom: 60px;
    .btn{
      float: right;
      margin-top: 45px;
      margin-right: 16px;
    }
    .el-collapse-item__header{
      height:30px;
      line-height:30px;
    }
    .list{
      background-color:#FFF;
      text-align: left;
      position: relative;
      border-bottom: 1px solid #ccc;
      padding-bottom: 21px;
        .list-tit{
          height: 35px;
          line-height: 35px;
          margin-bottom: 21px;
          border-bottom: 1px solid #ccc;
          border-top: 1px solid #ccc;
          .tit{
            border-left: 3px solid #31BE2A;
            padding-left:5px;
          }
        }
        .pImg{
          margin-left: 11px;
          width:82px;
          height: 82px;
          overflow: hidden;
          border-radius: 50%;
          img{
            width:82px;
            height: 82px;
          }
          }
        .pInfo{
          margin-left: 20px;
          span{
            // color:red;
          }
          i{
            background-color: #44A439;
            color: #fff;
            border-radius: 2px;
            padding: 0 2px;
            margin-left: 10px;
          }
          .grey{
            color:#686868;
          }
        }
        .status{
            float:right;
            line-height: 20px;
            margin-right: 18px;
            margin-top: 4px;
            background-color: #55AA55;
            color:#fff;
            border-radius:3px;
            padding:2px;
        }
        .devstatus{
            float: right;
            margin-right: 14px;
            color: #DA9341;
        }
      }
    }
}
</style>
